<template>
  <div class="map-style-container">
    <el-radio-group v-model="radio" @change="handleStyleChange">
      <el-radio-button v-for="(item, index) in styleOptions" :key="index" :label="item.value">
        <div class="map-style-item">
          <img :src="getImagePath(item)" alt="" class="map-style-image" />
          <div class="map-style-name">{{ item.name }}</div>
        </div>
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'MapStyle',
  data() {
    return {
      styleOptions: [
        {
          name: '浅色地图',
          value: 'StreetsLight'
        },
        {
          name: '深色地图',
          value: 'StreetsDark'
        },
        {
          name: '标准地图',
          value: 'Streets'
        },
        {
          name: '影像地图',
          value: 'Satellite512'
        }
      ],
      radio: '1'
    }
  },
  methods: {
    getImagePath(item) {
      return `image/mapType/${item.value}.png`
    },
    handleStyleChange(value) {
      MAP.setStyle(`aegis://styles/aegis/${value}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.map-style-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: flex-start;
  background-color: white;
  width: 100px;
  height: 66px;
  overflow: hidden;
}
/* .map-style-container >>> .el-radio-button__inner {
  padding: 2px;
} */

.map-style-container :deep(.el-radio-button__inner) {
  padding: 2px;
}

.map-style-container:hover {
  animation: move 1s;
  animation-fill-mode: forwards;
}
/*.map-style-item:hover .map-style-name{*/
/*    background-color: blue;*/
/*}*/
.map-style-item {
  position: relative;
  height: 60px;
}
.map-style-image {
  width: 90px;
  height: 60px;
}
.map-style-name {
  position: absolute;
  right: 5px;
  bottom: 5px;
  color: #0a8179;
}
@keyframes move {
  from {
    width: 100px;
  }
  to {
    width: 382px;
  }
}
</style>
